﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="/plugins/CheckList/ui.dropdownchecklist.themeroller.css" rel="stylesheet" />
    <style type="text/css">
        /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
        .ui-layout-center, /* has content-div */ .ui-layout-west, /* has Accordion */ .ui-layout-east, /* has content-div ... */ .ui-layout-east .ui-layout-content
        {
            /* content-div has Accordion */
            padding: 0;
            overflow: hidden;
        }
        .ui-layout-center P.ui-layout-content
        {
            line-height: 1.4em;
            margin: 0; /* remove top/bottom margins from <P> used as content-div */
        }
        h3, h4
        {
            /* Headers & Footer in Center & East panes */
            font-size: 1.1em;
            background: #EEF;
            border: 1px solid #BBB;
            border-width: 0 0 1px;
            padding: 7px 10px;
            margin: 0;
        }
        .ui-layout-east h4
        {
            /* Footer in East-pane */
            font-size: 0.9em;
            font-weight: normal;
            border-width: 1px 0 0;
        }
        .menuContainerJSListBox
        {
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 50px;
            overflow: auto;
        }
        .DCTextClass
        {
            margin-top: 10px;
            margin-left: 50px;
            margin-right: 50px;
            margin-bottom: 20px;
        }
        .NDPriceCss
        {
            background-color: greenyellow;
        }
    </style>
    <script src="/plugins/slick.editors.js"></script>
    <script src="/plugins/slick.core.js"></script>
    <script src="/plugins/slick.checkboxselectcolumn.js"></script>
    <script src="/plugins/slick.autotooltips.js"></script>
    <script src="/plugins/slick.cellrangedecorator.js"></script>
    <script src="/plugins/slick.cellrangeselector.js"></script>
    <script src="/plugins/slick.cellcopymanager.js"></script>
    <script src="/plugins/slick.cellselectionmodel.js"></script>
    <script src="/plugins/slick.rowselectionmodel.js"></script>
    <script src="/plugins/slick.formatters.js"></script>
    <script src="/plugins/slick.grid.js"></script>
    <script src="/Scripts/Helper.js" type="text/javascript"></script>
    <script src="/plugins/surge.core.js" type="text/javascript"></script>
    <script src="/plugins/surge.slickGrid.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-inherit.js" type="text/javascript"></script>
    <script src="/plugins/ListView/js-listbox.js" type="text/javascript"></script>
    <script src="/plugins/CheckList/ui.dropdownchecklist.js" type="text/javascript"></script>
    <script src="/Scripts/CurrentTime.js" type="text/javascript"></script>
    <script type="text/javascript">
    window.onload = DisplayTime;
    var myLayout;
    var mysupLayout;
        $(document).ready(function () {

        //loadFrm("/page/userManagement.htm");

//            myLayout = $('body').layout({
//                west__size: 234
//		, east__size: 300
//                // RESIZE Accordion widget when panes resize
//		, west__onresize: $.layout.callbacks.resizePaneAccordions
//		, east__onresize: $.layout.callbacks.resizePaneAccordions
//            });

//            mysupLayout = $('#mainFrame').layout({
//                center__paneSelector:	".inner-center" 
//                , west__paneSelector:		".inner-west"
//                ,west__size: '40%' 
//                ,south__size:'50%'
//                });
            
            $('ul.dropdown').jdMenu();
            // ACCORDION - in the West pane
            $("#accordion1").accordion({ fillSpace: true });

            // ACCORDION - in the East pane - in a 'content-div'
            $("#accordion2").accordion({
                fillSpace: true
		, active: 1
            });


            // THEME SWITCHER
            addThemeSwitcher('.ui-layout-north', { top: '12px', right: '5px' });
            // if a new theme is applied, it could change the height of some content,
            // so call resizeAll to 'correct' any header/footer heights affected
            // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
            setTimeout(myLayout.resizeAll, 1000); /* allow time for browser to re-render with new theme */
            $(".toolbarCommand button:first").button({
                 
                icons: {
                    primary: "ui-icon-plusthick"
                },
            }).next().button({
                icons: {
                    primary: "ui-icon-gear"
                }
            }).next().button({
                icons: {
                    primary: "ui-icon-minusthick"
                    
                }
            });
            
            showLayout('1');
            
        });
        function GridDocumentInit(gridtarget,allDocument, status){
            var columnGridDocument = [
                { id: "DocID", name: "Document ID", field: "DocID", width: 120, cssClass: "cell-title" },
                { id: "Region", name: "Region", field: "Region" },
                { id: "CreateBy", name: "CreateBy", field: "UserName", width: 80, resizable: false },
                { id: "CreateOn", name: "CreateOn", field: "Created", minWidth: 60 },
                {id: "Enter", name: "", field:"DocID", formatter:Slick.Formatters.Enter},
            ];
            var optionsDocumentGrid = {
                editable: true,
                enableRowReordering: true,
                enableCellNavigation: true,
                asyncEditorLoading: false,
                autoEdit: false
            };

                var datas = [];
                if (status === 'all'){
                    datas = allDocument;
                }
                else{
                    datas = jQuery.grep(allDocument, function(n, i){
                    return (n.Status === status);
                    });
                }
                 var documentgrid = new Slick.Grid(gridtarget, datas , columnGridDocument, optionsDocumentGrid);
            documentgrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));
            documentgrid.onCellChange.subscribe(function (e, args) {
                //updateUser(args.item);
            });
                
          
            
            


//            var columns = createColumnGrid();
//            ProdData('insert', getProductSelect());
//            var datas = productGridData;
//            productgrid = new Slick.Grid(gridtarget, datas , columns, optionsProductGrid);
//            productgrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));
//            productgrid.onCellChange.subscribe(function (e, args) {
//                //updateUser(args.item);
//            });
        }
        
        function initStep2() {
              mysupLayout = $('#mainFrame2').layout({
                center__paneSelector:	".inner-center" 
                , west__paneSelector:		".inner-west"
                
                ,west__size: '40%' 
                ,south__size:'50%'
                });
            alert('kk');
        }
        function showLayout(step,docid) {
            switch (step) {
            case '1':
                $('#mainFrame2').html($('#DocumentManageStep').html());
                buttonInit();
                var tabHtmlComplete = '';
                var divHtmlComplate = '';
                var tabItemHtml = '<ul>{0}<ul>';
                var tabItemComplete = '';
                var constTabID = 'tab';
                var constGrid = 'grid';
                var constAllstatus = 'all';
                helper.GetStatusTab(function (allTabStatus){
                    
                    var htmltemplate = '<li><a href="#{0}">{1}</a></li>';
                    tabItemComplete += htmltemplate.format(constTabID + constAllstatus,'ALL'); // add tab All
                    $.each(allTabStatus.AllStatus, function(key, value) {
                        tabItemComplete += htmltemplate.format(constTabID + value.StatusID, value.StatusDescription);

                    });
                    tabHtmlComplete = tabItemHtml.format(tabItemComplete);
                    var divTemplate = '<div id="{0}"><div></div><div style="height:500px;" id="{1}">{0}</div></div>'
                        divHtmlComplate += divTemplate.format(constTabID + constAllstatus, constGrid+ constAllstatus); // add div grid all
                    $.each(allTabStatus.AllStatus, function(key, value) {
                        divHtmlComplate += divTemplate.format(constTabID + value.StatusID, constGrid+ value.StatusID);

                    });
                    
                    $("#tabs").html(tabHtmlComplete).append(divHtmlComplate);

                    helper.GetAllDocumentByUser(function (alldocument){
                         GridDocumentInit('#' + constGrid+ constAllstatus ,alldocument.AllDocument,constAllstatus);
                         $.each(allTabStatus.AllStatus, function(key, value) {
                            GridDocumentInit('#' + constGrid+ value.StatusID ,alldocument.AllDocument,value.StatusID);
                        });
                        //GridDocumentInit('#grid11' ,alldocument.AllDocument,'11');
                    });

                    
                    
                    $( "#tabs" ).tabs();
                });
                break;
                
            case '2':   
                $('#mainFrame2').html($('#customerProductStep').html());
                initStep2();
                CustomerProductiMappingInit();
            break; 

            case '3':
            $('#mainFrame2').html($('#gridproductDetailStep').html());
                $("#txtValidOn").datepicker();
                $("#txtValidTo").datepicker();
                $("#txtValidOn").change(function() {
                    var test = $(this).datepicker('getDate');
                    //var testm = new Date(test.getTime());
                   // var testm.setDate(testm.getDate() + 1);
                    //$("#endDate").datepicker("option", "minDate", testm);
                    $("#txtValidTo").datepicker("option", "minDate", test );
                });

                
                $("#btnAddPrice").button({
                    icons: {
                    primary: "ui-icon-plus"
                },
                    }).click(
                {
                    
                });
			$("#btnMinusPrice").button({
                    icons: {
                    primary: "ui-icon-minus"
                },
                    }).click(
                {
                    
                });
                $("#btnSaveTodraft")
			.button({
                 
                icons: {
                    primary: "ui-icon-document"
                },
            })
			.click(function () {
			    
			    //RefreshGridCustomerProduct();
			});
           $("#btnSendToApproval")
			.button({
                 
                icons: {
                    primary: "ui-icon-mail-closed"
                },
            })
			.click(function () {
			    var doctype = '01';
			    var completedata = [];
			    
			    var datas = discountgrid.getData();
			    var columns = discountgrid.getColumns();
			    $.each(columns, function(name, value) {
			        var dc = value.dc;
			        var custId = value.id;
			        if (dc != undefined) {
			            $(datas).each(function() {
			                var item = { };
			                item.DCID = dc;
			                item.RefID = custId;
			                item.ProductID = this.ProdID;
			                item.discountPrice = this[custId];
			                if(item.discountPrice != 'N/A') {
			                    completedata.push(item);
			                }


			            });
			        }
			    });
//			    $(datas).each(function() {
//			        var d = this;
//			        var custId = d.CuctID;
//			        var dc = d.DC;

//			        var i = 0;
//			        $.each(d, function(name, value) {
//			            if (i > 3) {
//			                var item = { };
//			                item.DCID = dc;
//			                item.RefID = custId;
//			                item.ProductID = name;
//			                item.discountPrice = value;
//			                completedata.push(item);
//			            }
//			            i = i + 1;
//			        });
//			    });
			    //var k = completedata;
			    var data = { Doctype: doctype, data: completedata };
			    helper.InserDocument(data, function(result) {
			        alert(result);
			    });
			});
                if (docid) {
                var optionsProductGridReadOnly = {
                    editable: false,
                    enableRowReordering: true,
                    enableCellNavigation: true,
                    asyncEditorLoading: false,
                    autoEdit: false
                    };
                    helper.GetColumnDocumentDetailByDocID(docid, function(columns) {
                        var cs = [];
                        cs.push({ id: "ProductDesc", name: "", field: "ProductDesc", minWidth: 60 });
                        cs.push({ id: "NDPrice", name: "NDPrice", field: "NDPrice", minWidth: 60, cssClass:'NDPriceCss' });

                        $.each(columns.allColumns, function(key, value) {
                            cs.push({ id: value.RefID, name: value.mcustname1, field: value.RefID, minWidth: 60 });
                        });

                        helper.GetDocumentDetailByDocID(docid, function(datas) {
                            var d = [];
                            $.each(datas.AllDocumentDetail, function(key, value) {
                                var ditem = value;
                                d.push(ditem);
                            });
                            discountgrid = new Slick.Grid("#SaleCustomerDetailGrid", d, cs, optionsProductGridReadOnly);
                            discountgrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));

                        });
                    });
                }
                else {
                    var optionsProductGrid = {
                    editable: true,
                    enableRowReordering: true,
                    enableCellNavigation: true,
                    asyncEditorLoading: false,
                    autoEdit: false
                    };
                    var ctemp = productgrid.getColumns();
                    var datatemp = productgrid.getData();
                    var cs = [];
                    cs.push({ id: "ProdID", name: "", field: "ProdID", minWidth: 60 , formatter: function (r, c, value, def, datactx) {
                        return getProductName(value); }
                    });
                    
                    cs.push({ id: "NDPrice", name: "NDPrice", field: "NDPrice", minWidth: 60 , cssClass:'NDPriceCss'});
                    
                    $.each(datatemp, function(key, value) {
                        cs.push({ dc:value.DC, id: value.CuctID , name: '(DC ' + value.DC + ') ' +  getCustomerName(value.CuctID) , field: value.CuctID, minWidth: 60, formatter:Slick.Formatters.DisableSupport, editor : Slick.Editors.Integer  });
                    });
                    
                    var datas = [];
                    var r = 0;
			        $.each(datatemp, function(name, value) {
			            var i = 0;
			                for (var prop in value) {
			                    if (i >= 4) {
			                        var dataItem = { };
			                        if (r > 0) {
			                            dataItem = datas[i-4];
			                        }

			                        if (value[prop] === true) {
			                            dataItem.ProdID = prop;
			                            dataItem.NDPrice = getNDPrice(prop);
			                            dataItem.CuctID = value.CuctID;
			                            dataItem[value.CuctID] = '';
			                            //this[prop] = '';
			                        }
			                        else if (value[prop] === false) {
			                            dataItem.ProdID = prop;
			                            dataItem.NDPrice = getNDPrice(prop);
			                            dataItem[value.CuctID] = 'N/A';
			                            //this[prop] = 'N/A';
			                        }

			                        if (r > 0) {
			                            datas[i-4] = dataItem;
			                        }
			                        else {
			                            datas.push(dataItem);
			                        }
			                    }
			                    i = i + 1;
			                }
			            r = r + 1;


			    });

                    RefreshGridDiscount(datas, cs, optionsProductGrid);
                    
               
                }
            default:
            }
        }
        
        function getCustomerName(custID) {
            var result = custID;
            $.map(custs, function(obj) {
                if (obj.mcustno === custID) {
                    result= obj.mcustname1;
                }
            })
            return result;
        }
        
        function getProductName(prodID) {
            var result = prodID;
            $.map(products, function(obj) {
                if (obj.mprodh === prodID) {
                    result= obj.mprodh_desc;
                }
            })
            return result;
        }
        function getNDPrice(prodID) {
            var result = prodID;
            $('#productChecklist li input:checkbox').each(function(value) {
                if (prodID === $(this).val()) {
                    result = $(this).attr('ndprice');
                }
               });
            
            return result;
        }
       
        function MsgBox(message) {
            $('#MessageBar').html(message);
        }
        
        var ProductListBoxItem = JSListBox.Item.extend({

			text: "",
			kvalue: "",
			init: function(text,value) {
				this.text = text;
			    this.kvalue = value;
			},

			render: function() {
				return '<a value='+ this.kvalue + ' href="#">' + this.text + '</a>';
			},
			
			onClick: function() {
				customerID= this.kvalue;
			    customerName = this.text;
				//alert(item.value);
			},
			
			onDblClick: function() {
				var item = new JSListBox.Item();
				item.kvalue = this.text + " item double clicked.";
				item.enabled = false;
				//alert(item.value);
			}
			
		});

        var helper = new Helper();

        function CustomerProductiMappingInit(parameters) {
            $("#Options").dropdownchecklist();
           //CustInit();
           ProductInit();
           
           //Init button
            $("#btnProdSave")
			.button({
                 
                icons: {
                    primary: "ui-icon-plus"
                },
            })
			.click(function () {
			    RefreshGridCustomerProduct();
			});
           
           $("#btnProdFinish")
			.button({
                 
                icons: {
                    primary: "ui-icon-note"
                },
            })
			.click(function () {
			    
			    $('#mainFrame2').html($('#gridproductDetail').html());
			    showLayout('3');
			    //RefreshGridDiscount();
			    //buttonInit();
//			    var doctype = '01';
//			    var data = { Doctype: doctype, data: datas };
//			    helper.InserDocument(data, function(result) {
//			        alert(result);
//			    });
			    
			});
            
            $("#ButtonSearch").button({
                 
                icons: {
                    primary: "ui-icon-search"
                }
            })
			.click(function () {
			   
			        CustInit();
			});
            
            
           
        }

       var custs = [];
       var custList = [];
       function CustInit() {
           custs = [];
           custList = [];
           helper.GetCustomerBySaleGrp($('#TextDCtex').val(),function(data) {
               custs = data.AllCustomer;
               window.listBoxAllItems = new JSListBox({'containerSelector':'ListBoxCustomerItems'});
               $.each(custs, function(key, value) {
                   custList.push(new ProductListBoxItem(value["mcustname1"], value["mcustno"]));
               });
			    window.listBoxAllItems.addItems(custList);
           });
           
//           for (var i = 0; i < 5; i++) {
//               var cust = (custs[i] = { });
//               cust["custtext"] = "ลูกค้า " + i;
//               cust["custvalue"] = 'c' + i;
//           }

           
       }

       function buttonInit(parameters) {
           
           
           $('#menuAddStep1').button({
                 
                icons: {
                    primary: "ui-icon-plus"
                }
            })
			.click(function () {

			    showLayout('2');
			});
            
             $('#menuEditStep1').button({
                 
                icons: {
                    primary: "ui-icon-pencil"
                }
            })
			.click(function () {
			    
			});
            
             $('#menuDeleteStep1').button({
                 
                icons: {
                    primary: "ui-icon-minus"
                }
            })
			.click(function () {
			    
			});
           
            
       }
       var products = [];
       function ProductInit() {
           products = [];
           var htmlcomp = '';
           var htmltemplate = '<li class="ui-menu-item" ><div class="ui-dropdownchecklist-item ui-state-default ui-corner-all" style="padding: 0.2em 0.4em;"><input ndprice="{2}" type="checkbox" tabindex="0" class="active" id="ddcl-Options-i0" index="0"value="{0}"><label for="ddcl-Options-i0" class="ui-dropdownchecklist-text"style="cursor: default; font-size:12px; padding: 0.2em 0.4em;">{1}</label></div></li>';
           helper.GetProductToSale(function(data) {
                products = data.AllProduct;
                $.each(products, function(key, value) {
                   htmlcomp += htmltemplate.format(value.mprodh, value.mprodh_desc, value.discountPrice);
                });

                $('#productChecklist ul').html(htmlcomp);

           });
//           for (var i = 0; i < 5; i++) {
//                var product = (products[i] = {});
//                product["producttext"] = "สินค้า " + i;
//                product["productvalue"] = "p" + i;
////                d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
////                d["start"] = "01/01/2009";
////                d["finish"] = "01/05/2009";
////                d["effortDriven"] = (i % 5 == 0);
//            }
           
          
       }

       function getProductSelect(iscolumn) {
           var produxtselected = [];
           if (iscolumn) {
               $('#productChecklist li input:checkbox').each(function(value) {
                   columns.push({ id: $(this).next().text(), name: $(this).next().text(), field: $(this).val(), minWidth: 60, formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox });
               });
               return produxtselected;
            }
           else {
               var product = { };
               product[columns[0].field] = 'Delete';
               product[columns[1].field] = 'ID';
               product[columns[2].field] = $('#TextDCtex').val();
               product[columns[3].field] = customerID;
               
               $('#productChecklist li input:checkbox').each(function(value) {
                   var cons = 4;
                   product[columns[value + cons].field] = $(this).is(':checked');
                   
               });
               return product;
           }
       
       }
       var productgrid;
       var optionsProductGrid = {
            editable: true,
            enableRowReordering: true,
            enableCellNavigation: true,
            asyncEditorLoading: false,
            autoEdit: false
        };

       var productGridData = [];
       var productGridDiscountData = [];
       var customerID = '';
       var customerName = '';
       var columns = [];
       var discountcolumns = [];
       function createColumnGrid() {
           columns = [];
           columns.push({ id: 'Delete', name: 'Delete', field: 'Delete',formatter: function (r, c, id, def, datactx) {
               return '<a href="#" onclick="RemoveClick('  + r + ')">X</a>'; }
               });
           columns.push({ id: 'ID', name: 'ID',formatter: function (row) {
               return row +1;
           } });
           columns.push({ id: 'DC', name: 'DC', field: 'DC' });
           columns.push({ id: 'CustID', name: 'CustID', field: 'CuctID',formatter: function (r, c, value, def, datactx) {
               
               return getCustomerName(value);
           } });
           getProductSelect(true);
           

           return columns;
       }
       
       function createColumnDiscountGrid(columns, isDeleteCommandColumn) {
           discountcolumns = columns;
           if (isDeleteCommandColumn){
            discountcolumns.splice(0,3);
           }
           $(discountcolumns).each(function(index)
           {
               if( index != 0) {
                   this.formatter = Slick.Formatters.DisableSupport;
                   this.editor = Slick.Editors.Integer;
               }
           });
           return discountcolumns;
       }
       
       function createDataDiscountGrid() {
           productGridDiscountData = productGridData;
           $(productGridDiscountData).each(function()
           {
               var k = this;
               
               for (var prop in k) {
                   if(k[prop] === true) {
                       this[prop] = '';
                   }
                   else if(k[prop] === false) {
                       this[prop] = 'N/A';
                   }
                
                }

//               $.each(k, function(name, value) {
//                   if(value === true ) {
//                       //value = '';
//                       k[name] = '';
//                   }
//                   else if(value === false) {
//                       k[name] = -1;
//                   }
//               });
               
           });
           
       }
       function RemoveClick(gridRow) {
            //alert((databaseId));
            //alert(gridRow);
            productGridData.splice(gridRow, 1);
            productgrid.setData(productGridData);
            productgrid.render();
       }
       function ProdData(event, data) {
           switch (event) {
           case 'insert':
               productGridData.push(getProductSelect());
           default:
           }
       }
       var productgrid;
       function RefreshGridCustomerProduct(parameters) {
            var columns = createColumnGrid();
            ProdData('insert', getProductSelect());
            var datas = productGridData;
            productgrid = new Slick.Grid("#SaleCustomerGrid", datas , columns, optionsProductGrid);
            productgrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));
            productgrid.onCellChange.subscribe(function (e, args) {
                //updateUser(args.item);
            });
    }

       var discountgrid;
       function RefreshGridDiscount(datas, cs, options) {
           
           discountgrid = new Slick.Grid("#SaleCustomerDetailGrid", datas , cs, options);
           discountgrid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: true }));
            productgrid.onCellChange.subscribe(function (e, args) {
                //updateUser(args.item);
            });
           discountgrid.onBeforeEditCell.subscribe(function (e,args) {
               var value = datas[args.row][discountgrid.getColumns()[args.cell].field];
               if (value === 'N/A') {
                   return false;
               }
               else {
                   return true;
               }
        });
       }
       
    </script>
</head>
<body>
    <div id="mainFrame2" class="ui-layout-center" width="100%" height="600" frameborder="0"
        scrolling="auto">
    </div>
    <div id="DocumentManageStep" style="display: none">
        <div style="padding-top: 10px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px;">
            <span id="toolbar" class=" ui-corner-all" style="float: left">
                <button id="menuAddStep1">
                    ADD</button>
                <button id="menuEditStep1">
                    Edit</button>
                <button id="menuDeleteStep1">
                    Delete</button>
            </span><span style="float: right">Quick Search&nbsp;<input type="text" maxlength="50"></span>
        </div>
        <div id="tabs">
        </div>
    </div>
    <div id="customerProductStep" style="display: none">
        <div class="inner-center">
            <div style="height: 20px;">
            </div>
            <div id="productChecklist" class="ui-widget ui-widget-content ui-corner-all" style="width: 50%;
                height: 80%; margin-left: 50px; margin-bottom: 10px; overflow: auto;">
                <div class="ui-widget-header" style="width: 99%;">
                    Product:
                </div>
                <ul>
                </ul>
            </div>
            <div style="margin-left: 50px;">
                <button id="btnProdSave">
                    ADD</button>
                <button id="btnProdNew">
                    Save</button>
                <button id="btnProdFinish">
                    Finish</button>
            </div>
        </div>
        <div class="inner-west">
            <div class="DCTextClass ">
                DC :
                <input id="TextDCtex" type="text" class="ui-widget ui-widget-content ui-corner-all ui-menu-item" />
                <button id="ButtonSearch">
                    Search</button>
            </div>
            <div id="ListBoxCustomerItems" style="height: 80%;">
            </div>
        </div>
        <div class="ui-layout-south">
            <div id="SaleCustomerGrid" style="width: 100%; height: 300px;">
            </div>
        </div>
    </div>
    <div id="gridproductDetailStep" style="display: none;">
        <div style="padding-top: 10px; padding-bottom: 30px; padding-left: 10px; padding-right: 10px;">
            <span id="Span1" class=" ui-corner-all" style="float: left">Valid On
                <input id="txtValidOn" type="text" />
                valid To
                <input id="txtValidTo" type="text" />
            </span><span style="float: right">
                <button id="btnAddPrice" style="width: 30px;">
                </button>
                <input id="txtaddPrice" type="text" />
                <button id="btnMinusPrice" style="width: 30px;">
                </button>
                <input id="txtMinusPrice" type="text" />
            </span>
        </div>
        <div id="SaleCustomerDetailGrid" style="width: 100%; height: 300px;">
        </div>
        <div>
            <div style="margin: 5px; vertical-align: middle;">
                <div style="width: 60px; float: left;">
                    Remark:
                </div>
                <input id="remark" type="text" />
            </div>
            <div style="margin: 5px; vertical-align: middle;">
                <div style="width: 60px; float: left;">
                    Remark2:
                </div>
                <input id="remark2" type="text" /></div>
        </div>
        <div>
            <button id="btnSaveTodraft">
                Save To Draft</button>
            <button id="btnSendToApproval">
                Send To approval</button>
        </div>
    </div>
</body>
</html>
